<template>
  <div class="page-container">
    <el-form label-position="top" class="custom-form">
      <el-form-item label="HAR文件" class="form-item-group">
        <el-input
          v-model="harFilePath"
          placeholder="选择HAR文件"
          readonly
          class="form-input"
        >
          <template #append>
            <el-button
              type="primary"
              @click="selectHarFileFn"
              class="browse-btn"
              >浏览</el-button
            >
          </template>
        </el-input>
        <div class="form-help">选择包含图片的HAR文件</div>
      </el-form-item>

      <el-form-item label="输出目录" class="form-item-group">
        <el-input
          v-model="outputDir"
          placeholder="选择图片输出目录"
          readonly
          class="form-input"
        >
          <template #append>
            <el-button
              type="primary"
              @click="selectOutputDirFn"
              class="browse-btn"
              >浏览</el-button
            >
          </template>
        </el-input>
        <div class="form-help">提取的图片将保存到这个目录</div>
      </el-form-item>

      <el-form-item label="输出JSON文件" class="form-item-group">
        <el-input
          v-model="outputJsonPath"
          placeholder="选择JSON输出文件路径"
          readonly
          class="form-input"
        >
          <template #append>
            <el-button
              type="primary"
              @click="selectOutputJsonFn"
              class="browse-btn"
              >浏览</el-button
            >
          </template>
        </el-input>
        <div class="form-help">图片的Base64编码信息将保存到这个JSON文件</div>
      </el-form-item>

      <el-form-item class="progress-section">
        <div class="progress-label">处理进度</div>
        <el-progress
          :percentage="progress"
          :status="progressStatus"
          :text-inside="true"
          :stroke-width="18"
          class="custom-progress"
        />
      </el-form-item>

      <el-form-item v-if="statusVisible" class="status-section">
        <el-alert
          :title="statusMessage"
          :type="statusType"
          show-icon
          class="status-alert"
        />
      </el-form-item>

      <el-form-item class="button-section">
        <el-button
          type="success"
          @click="extractImagesFn"
          :disabled="isProcessing"
          class="primary-btn"
          >开始提取</el-button
        >
        <el-button type="default" @click="clearFormFn" class="secondary-btn"
          >清空</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 响应式数据
const harFilePath = ref('');
const outputDir = ref('');
const outputJsonPath = ref('');
const progress = ref(0);
const progressStatus = ref('');
const statusMessage = ref('');
const statusType = ref('info');
const statusVisible = ref(false);
const isProcessing = ref(false);

// 选择HAR文件
const selectHarFileFn = async () => {
  const paths = await window.electronAPI.openFileDialog({
    filters: [{ name: 'HAR文件', extensions: ['har'] }],
  });
  if (paths.length > 0) {
    harFilePath.value = paths[0];
  }
};

// 选择输出目录
const selectOutputDirFn = async () => {
  const paths = await window.electronAPI.openDirectoryDialog();
  if (paths.length > 0) {
    outputDir.value = paths[0];
  }
};

// 选择输出JSON文件
const selectOutputJsonFn = async () => {
  const paths = await window.electronAPI.saveFileDialog({
    filters: [{ name: 'JSON文件', extensions: ['json'] }],
  });
  if (paths.length > 0) {
    outputJsonPath.value = paths[0];
  }
};

// 显示状态信息
const showStatusFn = (message, type) => {
  statusMessage.value = message;
  statusType.value = type;
  statusVisible.value = true;
};

// 更新进度值
const progressValueUpdateFn = value => {
  progress.value = value;
  if (value === 100) {
    progressStatus.value = 'success';
  } else {
    progressStatus.value = '';
  }
};

// 开始提取图片
const extractImagesFn = async () => {
  if (!harFilePath.value) {
    showStatusFn('请选择HAR文件', 'error');
    return;
  }

  if (!outputDir.value) {
    showStatusFn('请选择输出目录', 'error');
    return;
  }

  if (!outputJsonPath.value) {
    showStatusFn('请选择输出JSON文件路径', 'error');
    return;
  }

  // 重置进度状态
  isProcessing.value = true;
  progress.value = 0;
  progressStatus.value = '';
  statusVisible.value = false;
  showStatusFn('开始解析HAR文件并提取图片...', 'info');

  try {
    const result = await window.electronAPI.parseHarFile({
      harFilePath: harFilePath.value,
      outputJsonPath: outputJsonPath.value,
      imagesOutputDir: outputDir.value,
    });
    showStatusFn(result.message, 'success');
    progressValueUpdateFn(100);
  } catch (error) {
    showStatusFn('提取失败: ' + error.message, 'error');
  } finally {
    isProcessing.value = false;
  }
};

// 清空表单
const clearFormFn = () => {
  harFilePath.value = '';
  outputDir.value = '';
  outputJsonPath.value = '';
  progress.value = 0;
  progressStatus.value = '';
  statusVisible.value = false;
};

// 监听进度更新
const progressUpdateFn = progress => {
  if (progress.type === 'parse-har-file') {
    if (progress.error) {
      showStatusFn('提取失败: ' + progress.error, 'error');
      isProcessing.value = false;
      return;
    }
    progressValueUpdateFn(progress.progress);
  }
};

// 生命周期钩子
onMounted(() => {
  window.electronAPI.onProgressUpdate(progressUpdateFn);
});

onUnmounted(() => {
  window.electronAPI.removeProgressListener();
});
</script>

<style scoped>
</style>